<template>
  <div>
    <div class="edit_left_nav new-edit_left_nav">
      <ul class="left_nav" pid="60c9608180ad91e38f321202" p-type="None">
        <li
          class="edit hdgc_False gio-edit-survey active"
          title="控件"
          @click="clickTab(1)"
        >
          <a
            permission-type="edit"
            href="javascript:;"
            :class="activeTab === 1 ? 'active' : ''"
          >
            <div class="el-icon-menu"><i> </i></div>
            控件
          </a>
        </li>
        <li class="settings show_new gio-edit-setting" @click="clickTab(5)">
          <a :class="activeTab === 5 ? 'active' : ''">
            <div>
              <nx-svg-icon class-name="logic-icon" icon-class="logic" />
            </div>
            逻辑
          </a>
        </li>
        <li class="edit-qlib qlib hdgc_False gio-edit-lib" @click="clickTab(2)">
          <a
            permission-type="edit"
            href="javascript:;"
            :class="activeTab === 2 ? 'active' : ''"
          >
            <div>
              <nx-svg-icon
                class-name="examination-icon"
                icon-class="examination"
              />
            </div>
            控件库
          </a>
        </li>
        <!-- <li class="appearset-setting facade hdgc_False gio-edit-appearset" @click="clickTab(3)" v-if="this.fromInfo.designType !== '/buildscreenanalyse.html'">
          <a :class="activeTab === 3 ? 'active' : ''">
            <div class="fa fa-tachometer"><i> </i></div>
            主题
          </a>
        </li> -->
        <li class="settings show_new gio-edit-setting" @click="clickTab(4)">
          <a :class="activeTab === 4 ? 'active' : ''">
            <div class="fa fa-clone"><i> </i></div>
            模板
          </a>
        </li>

<!--        <li class="settings show_new gio-edit-setting" @click="clickTab(6)">-->
<!--          <a :class="activeTab === 6 ? 'active' : ''">-->
<!--            <div>-->
<!--              <nx-svg-icon class-name="help-icon" icon-class="help" />-->
<!--            </div>-->
<!--            帮助-->
<!--          </a>-->
<!--        </li>-->
      </ul>
    </div>
    <div class="leftplane">
      <div v-if="activeTab === 1 || activeTab === 3">
        <div class="theme_select">控件库</div>
        <el-collapse v-model="activeName" accordion>
          <template v-for="(item, index) in controlComponents">
            <el-collapse-item
              v-bind:key="index"
              :title="item.title"
              v-if="showfun(item) === true"
              style="padding: 0px;"
              :name="index"
            >
              <draggable
                class="tool-draggale"
                :list="item.controls"
                v-bind="item.draggablebind"
                @end="handleMoveEnd"
                @start="handleMoveStart"
                :move="handleMove"
              >
                <template v-for="(controlitem, index) in item.controls">
                  <a-tag
                    color="blue"
                    :key="index"
                    v-if="showfun(controlitem) === true"
                  >
                    <i
                      :class="controlitem.icon"
                      style="font-size: 12px;margin-right: 1px;width: 12px;"
                    ></i>
                    {{ controlitem.name }}
                  </a-tag>
                </template>
              </draggable>
            </el-collapse-item>
          </template>
        </el-collapse>
      </div>
      <div v-if="activeTab === 5" style="margin: 5px;">
        <div class="theme_select">
          逻辑设置
          <i class="el-icon-circle-plus addlogic" @click="addlogic"></i>
        </div>
        <template v-for="(controlitem, index) in logicList">
          <div
            class="question-item    no-option"
            data-id="5d11ff7f3631f29ee344034c"
            :key="index"
          >
            <div class="question-contenttemp" :title="controlitem.logicname">
              <p class="title one-line-cut">
                {{ controlitem.logicname }}
              </p>
              <span class="action">
                <i class="el-icon-edit" @click="editlogic(controlitem)"></i>
                <i class="el-icon-delete" @click="dellogic(controlitem)"></i>
              </span>
            </div>
          </div>
        </template>
      </div>
      <div v-if="activeTab === 2" style="margin: 5px;">
        <div class="theme_select">控件筛选</div>
        <!-- <a-input-search
          placeholder="搜索全部"
          v-model="questionname"
          @search="onSearch"
        /> -->

        <el-collapse v-model="questionActiveName" accordion>
          <template v-for="(item, index) in questionConfiglist">
            <el-collapse-item
              v-bind:key="'question' + index"
              :title="item.title"
              v-if="showfun(item) === true"
              style="padding: 0px;"
              :name="'question' + index"
            >
              <draggable
                class="tool-draggale qlib-list-wrap"
                :list="item.questionProperty"
                v-bind="item.draggablebind"
                @end="handleMoveEnd"
                @start="handleMoveStart"
                :move="handleMove"
              >
                <!-- 默认 -->
                <!-- 选中 checked-->
                <!-- 展开 show-option-->
                <!-- 没有显示详情 no-option-->
                <!-- is_search 用于数据需求 -->
                <div
                  class="question-item    no-option"
                  data-id="5d11ff7f3631f29ee344034c"
                  v-for="(controlitem, index) in item.questionProperty"
                  :key="index"
                >
                  <div class="question-content" :title="controlitem.title">
                    <p class="title one-line-cut">
                      <i :class="controlitem.icon"></i>{{ controlitem.title }}
                    </p>
                  </div>
                </div>
              </draggable>
            </el-collapse-item>
          </template>
        </el-collapse>
      </div>
      <div v-if="activeTab === 4" style="margin: 5px;">
        <div class="theme_select">模块筛选</div>
        <a-input-search
          placeholder="搜索全部"
          v-model="fromname"
          @search="onSearchtemp"
        />
        <template v-for="(controlitem, index) in fromtemplist">
          <div
            class="question-item    no-option"
            data-id="5d11ff7f3631f29ee344034c"
            :key="index"
          >
            <div class="question-contenttemp" :title="controlitem.FromName">
              <p class="title one-line-cut">
                {{ controlitem.FromName }}
              </p>
              <span class="action">
                <i class="fa fa-eye" @click="viewtemp(controlitem)"></i>
                <i
                  class="el-icon-circle-plus"
                  @click="addtemp(controlitem)"
                ></i>
              </span>
            </div>
          </div>
        </template>
        <a-pagination
          v-if="fromtempPage.total / fromtempPage.currentpage > 0"
          v-model="fromtempPage.currentpage"
          :total="fromtempPage.total"
          show-less-items
          @change="changepagination"
        />
      </div>
    </div>

    <zhlDialog
      title="逻辑编排"
      ref="refformuladialog"
      width="1080px"
      class="my-dialog"
    >
      <formula @close="fromnulaclose" :logicItem="selectlogicitem"></formula>
    </zhlDialog>
  </div>
</template>
<script>
import nxSvgIcon from '@/components/nx-svg-icon/index'
import Draggable from 'vuedraggable'
import { controlComponents } from '@/components/formdesign/controlconfig.js'
import { questionConfigJson } from '@/components/formdesign/questionconfig.js'

import { queryComControllist } from '@/api/tappcomcontrol.js'
import formula from '@/components/formdesign/formula.vue'
import { apiComm } from '@/api/index.js'
export default {
  components: {
    Draggable,
    nxSvgIcon,
    formula
  },
  props: ['data'],
  data() {
    return {
      controlComponents,
      questionConfiglist: [],
      fromInfo: this.changeFromInfo(),
      activeName: 1,
      activeTab: 1,
      questionActiveName: 1,

      selecttit: '',
      selectcolor: '',
      selecttheme: {},
      fromtemplist: [],
      fromtempPage: {
        currentpage: 1,
        total: 0
      },
      fromname: '',
      questionname: '',
      editControlType: this.getEditControlType(),
      logicList: [],
      selectlogicitem: undefined
    }
  },
  methods: {
    handleMoveEnd(evt) {
      console.log('end', evt)
    },
    handleMoveStart() {},
    handleMove(evt, originalEvent) {
      // console.log('handleMove', evt.draggedContext)
      let canDrag = true
      if (
        evt.draggedContext.element.type === 'jsPanel' &&
        this.data.list.length > 0
      ) {
        this.data.list.forEach(item => {
          if (item.type === 'jsPanel') {
            console.log('jsPancel is exists.')
            canDrag = false
          }
        })
      }
      // console.log('handleMove', this.data.list.length)
      console.log('handleMove1', originalEvent)
      return canDrag
    },
    showfun(controlitem) {
      if (controlitem.funshow === undefined) {
        return true
      }
      return controlitem.funshow(controlitem, this.fromInfo)
    },
    clickTab(tabindex) {
      if (tabindex < 6) {
        this.activeTab = tabindex
      }
      if (tabindex === 6) {
        window.open('http://qifeng.321zou.com')
      }
      if (tabindex === 3) {
        this.setEditControlType(3)
      } else {
        this.setEditControlType(0)
      }
      if (tabindex === 4) {
        this.loadfromdata(1)
      }
    },
    onSearchtemp() {
      this.loadfromdata(1)
    },
    loadfromdata(pageindex) {
      const param = {
        fromname: this.fromname,
        page: pageindex,
        rows: 10,
        fromtype: this.$query('fromtype')===null?1:this.$query('fromtype')
      }
      apiComm('tappFrom.queryFromList', param).then(res => {
        this.fromtemplist = res.data.list
        this.fromtempPage.total = res.totalcount
      })
    },
    changepagination(page) {
      this.fromtempPage.currentpage = page
      this.loadfromdata(page)
    },
    addtemp(data) {
      this.$confirm(
        String(
          '添加[' +
            data.FromName +
            ']表单会把正在设计的表单进行覆盖，继续添加吗？'
        )
      ).then(() => {
        const fromdesignjson = JSON.parse(data.fromdesignjson)
        fromdesignjson.formid = this.fromInfo.formid
        fromdesignjson.fromTableName =
          'question' +
          Date.parse(new Date()) +
          '_' +
          Math.ceil(Math.random() * 99999)
        const controllist =
          fromdesignjson.layoutitemlist[0].widgetForm.list[0].columns[0].list
        const selectrows = controllist.filter(ee => ee.type === 'listview')
        for (let i = 0; i < selectrows.length; i++) {
          selectrows[i].options.controlId =
            'view' +
            Date.parse(new Date()) +
            '_' +
            Math.ceil(Math.random() * 99999)
        }
        this.setFromInfo(fromdesignjson)
      })
    },
    viewtemp(data) {
      window.open(`/viewfrom?fromid=${data.FID}`)
    },
    loadqueryComControllist() {
      const questiondic = {}
      this.questionConfiglist.forEach(ee => {
        questiondic[ee.title] = ee
      })
      queryComControllist({}).then(res => {
        res.data.forEach(ee => {
          questiondic[ee.controlType].questionProperty.push(
            JSON.parse(ee.controlJson)
          )
        })
      })
    },
    addlogic() {
      this.selectlogicitem = undefined
      this.$refs.refformuladialog.visible = true
    },
    fromnulaclose() {
      this.$refs.refformuladialog.visible = false
      this.logicList = this.changeFromInfo().logicList
    },
    dellogic(item) {
      this.logicList.splice(this.logicList.indexOf(item), 1)
    },
    editlogic(item) {
      this.selectlogicitem = item
      this.$refs.refformuladialog.visible = true
    }
  },
  mounted() {
    this.questionConfiglist = JSON.parse(JSON.stringify(questionConfigJson))
    this.logicList = this.changeFromInfo().logicList
    this.loadqueryComControllist()
  },
  computed: {
    SetChangeFromInfo() {
      return this.changeFromInfo()
    },
    watchGetEditControlType() {
      return this.getEditControlType()
    }
  },
  watch: {
    SetChangeFromInfo(val) {
      this.fromInfo = val
      this.logicList = val.logicList
    },
    watchGetEditControlType(val) {
      this.editControlType = val
      if (this.editControlType === 3) {
        this.activeTab = 3
      }
    }
  },
  inject: [
    'changeFromInfo',
    'setFromInfo',
    'setEditControlType',
    'getEditControlType'
  ]
}
</script>
<style lang="less">
.el-collapse-item__header .is-active {
  font-weight: bold;
}
.leftplane {
  position: fixed;
  top: 56px;
  left: 74px;
  z-index: 2;
  width: 210px;
  height: calc(100vh - 60px);
  background-color: white;
  overflow-y: auto;
}
.ant-tag {
  margin-top: 8px;
  width: 85px;
  display: inline-block;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -icab-text-overflow: ellipsis;
  -khtml-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
}
</style>
<style lang="less" scoped>
.form-edit-widget-label {
  font-size: 12px;
  display: block;
  width: 42%;
  line-height: 26px;
  position: relative;
  float: left;
  left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 2%;
  color: #333;
  border-radius: 4px;
  border: 1px dashed #d9d9d9;

  &:hover {
    color: #409eff;
    border: 1px dashed #409eff;
  }

  & > a {
    display: block;
    cursor: move;
    background: #f4f6fc;
    border: 1px solid #f4f6fc;

    .icon {
      margin-right: 6px;
      margin-left: 8px;
      font-size: 14px;
      display: inline-block;
      vertical-align: middle;
    }

    span {
      display: inline-block;
      vertical-align: middle;
    }
  }
}
</style>
<style scoped>
.edit_left_nav {
  position: fixed;
  left: 0;
  top: 56px;
  z-index: 299;
  border-right: 1px solid #eaeaea;
  width: 71px;
  height: 100%;
  background-color: #fff;
  text-align: center;
}
.left_nav li {
  line-height: 24px;
}
.left_nav li {
  position: relative;
}
.edit_left_nav li {
  cursor: pointer;
}
li,
ol,
ul {
  list-style: none;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0px;
}
.edit_left_nav .left_nav li a {
  font-size: 12px;
  /* color: #484848; */
}
a {
  color: #484848;
}
.active {
  color: #2672ff;
}
a,
a:hover {
  text-decoration: none;
}
a {
  text-decoration: none;
  outline: none;
  cursor: pointer;
}

.edit_left_nav .left_nav li a > div {
  position: relative;
  font-size: 28px;
  width: 100%;
  border-radius: 4px;
  height: 36px;
  padding: 5px;
  box-sizing: border-box;
}
.new-edit_left_nav .blue_icon {
  background-color: #f5f6fa;
}
.qlib-list-wrap {
  box-sizing: border-box;
  margin-right: 1px;
  height: 392px;
  overflow: auto;
}
.question-item {
  box-sizing: border-box;
  height: 70px;
  background: #fff;
  box-shadow: 1px 1px 3px 0 rgb(0 0 0 / 10%);
  border-radius: 2px;
  margin-bottom: 6px;
  overflow: hidden;
  border: 1px solid #fff;
  position: relative;
  transition: height 0.5s;
}
.question-item.no-option {
  height: 50px;
}
.question-contenttemp {
  padding-top: 12px;
}
.question-content {
  padding-top: 12px;
}
.question-content .title {
  display: inline-block;
  width: 158px;
  font-size: 12px;
  color: #484848;
  line-height: 21px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.question-contenttemp .title {
  display: inline-block;
  width: 153px;
  font-size: 12px;
  color: #484848;
  line-height: 21px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.question-contenttemp .action {
  float: right;
  width: 45px;
  color: #8e8d8d;
  line-height: 21px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.question-contenttemp .action i {
  font-size: 16px;
  margin: 5px;
  color: #8e8d8d;
}
.question-contenttemp i {
  font-size: 12px;
  margin-right: 1px;
  width: 12px;
  color: #1890ff;
}
.theme_select {
  font-size: 16px;
  color: #484848;
}
.style_select {
  padding-top: 18px;
  font-size: 0;
  position: relative;
}
.style_select .style_select_tit,
.color_select .color_select_tit {
  display: inline-block;
  position: absolute;
  margin-top: 5px;
}
.style_select span,
.color_select span {
  margin-right: 7px;
  font-size: 13px;
  color: #707070;
  line-height: 14px;
}
.style_select .style_select_cot,
.color_select .color_select_cot {
  margin-left: 32px;
}
.style_select p,
.style_select .all,
.color_select .all {
  display: inline-block;
  padding: 5px 9px;
  border: 1px solid #eaeaea;
  font-size: 12px;
  color: #707070;
  line-height: 12px;
  border-radius: 2px;
  margin: 0 2px 4px 0;
  cursor: pointer;
}
.color_select p i {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 2px;
}
.color_select p {
  display: inline-block;
  border: 1px solid #eaeaea;
  padding: 2px;
  border-radius: 2px;
  margin-bottom: 4px;
  margin-right: 2px;
  cursor: pointer;
}
.pic_select {
  padding-top: 18px;
  font-size: 0;
  line-height: 0;
}
.pic_select p {
  display: inline-block;
  width: 80px;
  height: 80px;
  background-color: #f3f5f6;
  margin: 0 10px 10px 0;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}
.pic_select p img {
  display: inline-block;
  width: 80px;
  height: 80px;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.pic_select p:after {
  content: '';
  background: url(https://www.wenjuan.com/static/images/Exterior_style/mobile/mobile_theme_active.png);
  background-size: 18px;
  width: 18px;
  height: 18px;
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
}
.style_select .selected,
.color_select .selected {
  color: #2672ff !important;
  border: 1px solid #2672ff !important;
}
.pic_select p.selected:after {
  display: block;
}
.addlogic {
  float: right;
  right: 10px;
  font-size: 18px;
  cursor: pointer;
}
.tool-draggale >>> .ant-tag {
  padding: 6px;
  width: 92px;
}
</style>
